@mixin iconStyle() {
  @apply w-full h-9 rounded-50;
  background-color: #383838;
  background-size: 100% 100%;
}

.floatBox {
  @apply w-9 fixed right-2 h-auto;
  bottom: 11.875rem;
  z-index: var(--pop-index);

  .floatBoxTv {
    @apply cursor-pointer relative;
    @include iconStyle();
    background-image: url('/images/float_tv.png');

    &:hover {
      background-image: url('/images/float_tv_active.png');

      .floatBoxTvCode {
        @apply flex;
      }
    }

    .floatBoxTvCode {
      @apply absolute right-14 top-2/4 rounded-lg hidden flex-col items-center bg-bg25;
      transform: translateY(-50%);
      width: 11.25rem;
      height: 12rem;
      padding: 1rem 0.9375rem;

      .code-text {
        @apply text-sm text-white text-center;
      }

      .code-box {
        @apply w-28 h-28 mt-2;
        background-color: #313131;

        .code-box-img {
          @apply w-24 h-24 ml-2 mt-2;
        }
      }
    }
  }

  .up {
    @apply mt-2 cursor-pointer;
    @include iconStyle();
    background-image: url('/images/float_up.png');

    &:hover {
      background-image: url('/images/float_up_active.png');
    }
  }
}
